<template>
    <div class="card">
        <span>{{number + 1}}</span>
        <span>{{info.content}}</span>
        <span>{{info.date}}</span>
        <!-- <span>{{info}}</span>  info是一个对象 -->
        <span class="icon-group">
            <i class="bk-icon icon-order" @click="getInfo"></i>
        </span>
    </div>
</template>
<script>
    export default {
        name: 'Card',
        props: { // 父组件通过props的方式向子组件传递数据
            info: {
                type: Object,
                default: () => ({})
            },
            number: {
                type: Number,
                default: 0
            }
        },
        methods: {
            getInfo () {
                this.$emit('getInfo', this.info) // 把info对象传递给父组件（子组件通过emit向父组件通信）
            }
        }
    }
</script>
<style lang="postcss" scoped>
    .card {
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px dashed #e9ebf0;
        padding: 0 20px;
        color: #66676e;
    }
    .card i {
        margin-left: 10px;
        color: #3a84ff;
    }
</style>
